<template>
  <div class="agency-product-con table-gl-w">
    <div class="search-con search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #tableBody>
          <a-table size="mini" :bordered="{ cell: true }" :loading="loading" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns v-if="!loading">
              <a-table-column title="经销商" :width="120" #cell="{ record }">
                <TextLimit position="top" :rows="1">{{ getName(record) }}</TextLimit>
              </a-table-column>
              <a-table-column title="图片" :width="50" #cell="{ record }">
                <ImgPopover :src="record.productPicList && record.productPicList[0] ? record.productPicList[0].url : ''">
                  <template #con>
                    <a-image width="40" height="40" fit="contain" :src="record.productPicList && record.productPicList[0] ? record.productPicList[0].url : ''" />
                  </template>
                </ImgPopover>
              </a-table-column>
              <a-table-column title="产品名称" :width="120" #cell="{ record }">
                <TextLimit position="top" :rows="2">{{ record.skuName }}</TextLimit>
              </a-table-column>
              <a-table-column title="经销商SKU/类目" :width="120" #cell="{ record }">
                <TextLimit position="top" :rows="1">{{ record.sku }}</TextLimit>
                <TextLimit position="top" :rows="1">{{ $extract(record, 'category.name') }}</TextLimit>
              </a-table-column>
              <a-table-column title="规格" :width="120" #cell="{ record }">
                <TextLimit position="top" :rows="1">{{ getSpec(record.specValueList) }}</TextLimit>
              </a-table-column>
              <a-table-column title="供应商SKU/SPU" :width="120" #cell="{ record }">
                <TextLimit position="top" :rows="1">{{ record.purchaseQuoteList && record.purchaseQuoteList[0] && record.purchaseQuoteList[0].ssku ? record.purchaseQuoteList[0].ssku : '--' }}</TextLimit>
                <TextLimit position="top" :rows="1">{{ record.purchaseQuoteList && record.purchaseQuoteList[0] && record.purchaseQuoteList[0].sspu ? record.purchaseQuoteList[0].sspu : '--' }}</TextLimit>
              </a-table-column>
              <a-table-column title="报价">
                <a-table-column title="币种" :width="60" #cell="{ record }">
                  {{ record.purchaseQuoteList && record.purchaseQuoteList[0] && record.purchaseQuoteList[0].currency ? record.purchaseQuoteList[0].currency : '--' }}
                </a-table-column>
                <a-table-column title="报价类型" :width="60" #cell="{ record }">
                  {{ filterType(record, 'quoteType') }}
                </a-table-column>
                <a-table-column title="发票类型" :width="60" #cell="{ record }">
                  {{ filterType(record, 'invoiceType') }}
                </a-table-column>
                <a-table-column title="税率" :width="60" #cell="{ record }">
                  {{ record.purchaseQuoteList && record.purchaseQuoteList[0] && record.purchaseQuoteList[0].parTaxRate ? record.purchaseQuoteList[0].parTaxRate + '%' : '--' }}
                </a-table-column>
                <a-table-column title="含税单价" :width="60" #cell="{ record }">
                  {{ record.purchaseQuoteList && record.purchaseQuoteList[0] && record.purchaseQuoteList[0].priceRange ? record.purchaseQuoteList[0].priceRange : '--' }}
                </a-table-column>
                <a-table-column title="交期" :width="60" #cell="{ record }">
                  {{ record.purchaseQuoteList && record.purchaseQuoteList[0] && record.purchaseQuoteList[0].deliveryDays ? record.purchaseQuoteList[0].deliveryDays + '天' : '--' }}
                </a-table-column>
                <a-table-column title="起订量" :width="60" #cell="{ record }">
                  {{ record.purchaseQuoteList && record.purchaseQuoteList[0] && record.purchaseQuoteList[0].moq ? record.purchaseQuoteList[0].moq : '--' }}
                </a-table-column>
                <a-table-column title="状态" :width="60" #cell="{ record }">
                  {{ filterType(record, 'status') }}
                </a-table-column>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import TableWrap from '@/components/TableWrap.vue'
  import FilterTable from '@/components/TableFilter.vue'
  import { findDealerList, findDealerProductSkuPage } from '@/api/supplier'
  const tableList: any = ref([])
  const filterItem: any = ref([
    {
      type: 'input_keyword',
      key: 'skuList',
      keyItems: [
        { label: '经销商SKU', value: 'skuList' },
        { label: '供应商SKU', value: 'sskuList' },
      ],
      keyWidth: '120',
      value: ref(),
      placeholder: '请输入',
      label: '',
      width: 160,
      isMultiple: true,
    },
    {
      type: 'input_keyword',
      key: 'skuNameList',
      keyItems: [
        { label: '产品名称', value: 'skuNameList' },
        { label: '规格名称', value: 'specsNameList' },
      ],
      keyWidth: '120',
      value: ref(),
      placeholder: '请输入',
      label: '',
      width: 160,
      isMultiple: false,
    },
    {
      key: 'dealerId',
      label: '经销商',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [],
    },
  ])
  let loading: any = ref(false)
  let searchValue: any = reactive({})
  const pageNation = reactive({ total: 0, pageSize: 20, pageNum: 1 })

  const searchByVal = (info: any) => {
    searchValue = {}
    searchValue = info
    if (searchValue.skuList) searchValue.skuList = searchValue.skuList.split(',')
    if (searchValue.sskuList) searchValue.sskuList = searchValue.sskuList.split(',')
    if (searchValue.skuNameList) searchValue.skuNameList = searchValue.skuNameList.split(',')
    if (searchValue.specsNameList) searchValue.specsNameList = searchValue.specsNameList.split(',')
    if (!searchValue.skuList) delete searchValue.skuList
    if (!searchValue.sskuList) delete searchValue.sskuList
    if (!searchValue.skuNameList) delete searchValue.skuNameList
    if (!searchValue.specsNameList) delete searchValue.specsNameList
    pageNation.pageNum = 1
    getList()
  }

  const filterType = (item: any, type: string) => {
    if (type == 'quoteType') {
      if (item.purchaseQuoteList && item.purchaseQuoteList[0]) {
        if (item.purchaseQuoteList[0].quoteType == '1') {
          return '非梯度报价'
        } else if (item.purchaseQuoteList[0].quoteType == '2') {
          return '梯度报价'
        } else {
          return '--'
        }
      }
    } else if (type == 'invoiceType') {
      if (item.purchaseQuoteList && item.purchaseQuoteList[0]) {
        let text = ''
        switch (item.purchaseQuoteList[0].invoiceType) {
          case 0:
            text = '不开票'
            break
          case 1:
            text = '普票'
            break
          case 2:
            text = '专票'
            break
          default:
            text = '--'
            break
        }
        return text
      }
    } else {
      if (item.purchaseQuoteList && item.purchaseQuoteList[0]) {
        let text = ''
        switch (item.purchaseQuoteList[0].status) {
          case 0:
            text = '作废'
            break
          case 1:
            text = '草稿'
            break
          case 10:
            text = '待经销商审核'
            break
          case 20:
            text = '待供应商审核'
            break
          case 30:
            text = '已生效'
            break
          default:
            text = '--'
            break
        }
        return text
      }
    }
  }

  //经销商列表
  async function getDealerList() {
    const res: any = await findDealerList()
    // dealerList.value = res?.data || []
    filterItem.value[2].optionItems = res?.data?.map((el: any) => {
      return {
        label: el.dealerName,
        value: el.id,
      }
    })
  }

  const getSpec = (list: any) => {
    if (!list) return
    return list.map((e: any) => e.valueCn).join(',')
  }

  const changePage = (val: number) => {
    pageNation.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.pageNum = 1
    pageNation.pageSize = val
    getList()
  }

  const getList = async () => {
    const params = {
      ...searchValue,
      pageSize: pageNation.pageSize,
      pageNum: pageNation.pageNum,
    }
    loading.value = true
    const res: any = await findDealerProductSkuPage(params)
    tableList.value = []
    tableList.value = res?.data?.records
    pageNation.total = res?.data?.total
    loading.value = false
  }

  const getName = (val: any) => {
    let arr = val?.purchaseQuoteList || []
    return arr.map((e: any) => e.dealerName).join(',')
  }

  getDealerList()
  getList()
</script>

<style lang="less" scoped></style>
